<template>
	<div class="icon-body">
		<el-tabs v-model="activeTab" type="border-card">
			<el-tab-pane label="字体图标" name="1">
				<div class="icon-content">
					<el-input v-model="searchElementIconName" class="margin-bottom-10" size="mini" clearable placeholder="请输入图标名称" @clear="filterIconsOfElement" @input.native="filterIconsOfElement">
						<i slot="suffix" class="el-icon-search el-input__icon"></i>
					</el-input>
					<el-tag v-for="item of elementIcons" :key="item" class="icon-item" @click="onSelectIconChange(1, item)">
						<i :class="'el-icon-' + item"></i>
					</el-tag>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
    import elementIcons from './element-icons';
    export default {
        name: 'IconSelect',
        data() {
            return {
                activeTab: '1',
                searchElementIconName: '',
                elementIcons,
                name: '',
                iconList: []
            };
        },
        methods: {
            filterIconsOfElement() {
                if (this.searchElementIconName) {
                    this.elementIcons = this.elementIcons.filter(item => item.includes(this.searchElementIconName));
                } else {
                    this.elementIcons = elementIcons;
                }
            },
            onSelectIconChange(type, name) {
                this.elementIcons = elementIcons;
                let iconName = name;
                if (type === 0) {
                    iconName = name;
                } else {
                    iconName = `el-icon-${name}`;
                }
                this.$emit('selected', iconName);
                document.body.click();
            },
            reset() {
                this.elementIcons = elementIcons;
                this.activeTab = '1';
                this.name = '';
                this.searchElementIconName = '';
                this.iconList = [];
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .icon-body {
        width: 100%;
        padding: 10px;
        .icon-content {
              height: 500px;
              overflow: auto;
              .icon-item {
                  margin: 2px;
                  font-size: 22px;
              }
            .icon-item:hover {
                color: #fff;
                background: #1ab394;
                cursor: pointer;
            }
        }
    }
</style>
